import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';

You can use the `Authenticator` component directly, or wrap your app in `withAuthenticator`
[Higher-Order Component](https://legacy.reactjs.org/docs/higher-order-components.html):

<Tabs>
  <TabItem title="Authenticator">
    ```js{3-4,11-12} file=../../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx

    ```
  </TabItem>
  <TabItem title="withAuthenticator">

`withAuthenticator` defaults the `variation` prop to `modal`.
  <Tabs>
    <TabItem title="Javascript">
    ```jsx
    import { Amplify } from 'aws-amplify';

    import { withAuthenticator } from '@aws-amplify/ui-react';
    import '@aws-amplify/ui-react/styles.css';

    import awsExports from './aws-exports';
    Amplify.configure(awsExports);

    function App({ isPassedToWithAuthenticator, signOut, user }) {
      if (!isPassedToWithAuthenticator) {
        throw new Error(`isPassedToWithAuthenticator was not provided`);
      }

      return (
        <>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </>
      );
    }

    export default withAuthenticator(App);

    export async function getStaticProps() {
      return {
        props: {
          isPassedToWithAuthenticator: true,
        },
      };
    }
    ```
    </TabItem>
    <TabItem title="TypeScript">
      ```js{3-4,9,18} file=../../../../../../examples/next/pages/ui/components/authenticator/withAuthenticator/index.page.tsx

      ```
    </TabItem>
  </Tabs>
  </TabItem>
</Tabs>

<Alert role="none" variation="info" heading="React Authenticator v1">
  Looking for a previous version of Authenticator? Checkout the [Authenticator
  v1
  documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-react).
</Alert>